import React, { Suspense, lazy } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
const Nav = lazy(() => import('./pages/Nav'));
const HelloWorld = lazy(() => import('./pages/HelloWorld'));
const AreaChina = lazy(() => import('./pages/AreaChina'));

function Routes() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Nav} />
        <Route path="/HelloWorld" component={HelloWorld} />
        <Route path="/AreaChina" component={AreaChina} />
      </Switch>
    </Suspense>
  );
}

export default function App() {
  return (
    <Router>
      <Routes />
    </Router>
  );
}
